<script setup>
import { onMounted, ref } from "vue";
import { getColumnByCode } from "@/api/column.js";

const content = ref([]);
const title = ref("管理办法");
const getData = async () => {
	const res = await getColumnByCode({ code: "manage" });
	if (res.data.code === 200) {
		title.value = res.data.data.title;
		content.value = res.data.data.content;
	}
};

onMounted(() => {
	getData();
});
</script>

<template>
	<div class="pageContent">
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>{{ title }}</div>
			</n-h6>
		</n-space>

		<n-divider class="pageDivider"></n-divider>
		<div class="ql-snow">
			<div class="content ql-editor" v-html="content"></div>
		</div>
	</div>
</template>

<style scoped>
.pageTitle {
	color: var(--primary-color);
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 0;
}
.pageDivider {
	background-color: var(--primary-color);
	height: 4px;
	margin: 0 0 30px;
	padding: 0;
}
</style>
